import React, { memo } from 'react'
import { NavLink } from 'react-router-dom'
import { 
    HeaderTopWrap, 
    HeaderWrap,
    HeaderTopContentWrap,
    HeaderTopContentLeftWrap,
    HeaderTopContentRightWrap,
    HeaderBottomLine
} from './style'
import SearchInput from '../search-input';

import { headerLinks } from "@/common/local-data.js"

    
export default memo(function Header() {
    return (
        <HeaderWrap>
            <HeaderTopWrap>
                <HeaderTopContentWrap>
                    <HeaderTopContentLeftWrap className="sprite_01" href="/"/>
                    {
                        renderItem()
                    }
                    <div className="hotWrapper">
                        <div className="sprite_01 hot"></div>
                    </div>
                    <HeaderTopContentRightWrap>
                        <SearchInput/>
                        <button className="creation">创作者中心</button>
                        <button className="login">登录</button>
                    </HeaderTopContentRightWrap>
                </HeaderTopContentWrap>
            </HeaderTopWrap>
            <HeaderBottomLine />
        </HeaderWrap>
    )

    function renderItem() {
        return headerLinks.map((item, index) => {
            return <div className="item" key={item.title}>
                {
                    item.link.indexOf("http") >= 0 ? <a href={item.link} >{item.title}</a> : 
                    <NavLink to={item.link} activeClassName="item-selected">
                        {item.title}
                        <i className="sprite_01 icon"></i>
                    </NavLink>
                }
            </div>
        });
    }
})
